<template>
  <div class="left-menu">
    <shop-title></shop-title>
    <el-menu
      :default-active="active"
      unique-opened
      text-color="#fff"
      background-color="#2d3a4b"
      active-text-color="#409EFF"
    >
      <template v-for="item in activeMenuList">
        <!-- 多层级菜单 -->
        <el-submenu
          :index="item.id"
          :key="item.id"
          v-if="item.children && item.children.length"
        >
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.name }}</span>
          </template>
          <!-- 3级菜单 -->
          <template v-for="item1 in item.children">
            <el-submenu
              :index="item1.id"
              :key="item1.id"
              v-if="item1.children && item1.children.length"
            >
              <template slot="title">{{ item1.name }}</template>
              <el-menu-item
                :index="item2.id"
                :key="item2.id"
                v-for="item2 in item1.children"
                @click="checkMenu(item2)"
                >{{ item2.name }}</el-menu-item
              >
            </el-submenu>
            <!-- 二级 -->
            <el-menu-item
              @click="checkMenu(item1)"
              :index="item1.id"
              :key="item1.id"
            
              v-else
              >{{ item1.name }}</el-menu-item
            >
          </template>
        </el-submenu>

        <!-- 一级菜单 -->
        <el-menu-item
          :index="item.id"
          :key="item.id"
          @click="checkMenu(item)"
          v-else
        >
          <i class="iconfont icon-home"></i>
          <span slot="title">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import ShopTitle from "@/components/ShopTitle.vue";
import { userMenuAuth } from "@/api/account";
export default {
  components: { ShopTitle },
  data() {
    return {
      // menuList: [],
      active: "",
    };
  },
  props:['activeMenuList','menuList','activeKey',],

  mounted() {
    this.getMenuList();
  },
  watch:{
     activeKey(now){
      if(this.menuList[now].children&&this.menuList[now].children.length>0){
          if(this.menuList[now].children[0].children&&this.menuList[now].children[0].children.length>0){
            this.$store.commit("changeMenuInfo", this.menuList[now].children[0].children[0]);
            this.active =this.menuList[now].children[0].children[0].id;

          }else{
            this.$store.commit("changeMenuInfo", this.menuList[now].children[0]);
            this.active =this.menuList[now].children[0].id;

          }


      }else{
      this.active = this.menuList[now].id;

        this.$store.commit("changeMenuInfo", this.menuList[now]);
      }
     }
  },
  methods: {
    checkMenu(item) {
      this.active = item.id;
      this.$store.commit("changeMenuInfo", item);
    },
    async getMenuList() {
      let res = await userMenuAuth({ remark: "pvg_vehicle" });
      // this.menuList = res.data;
      if(localStorage.getItem('menuInfo')){
        this.active = JSON.parse(localStorage.getItem('menuInfo')).id
      }
    },
  },
};
</script>

<style lang="less" scoped>
.left-menu {
  // width: 200px;
  background: rgb(45, 58, 75);
  .el-menu {
    border-right: none;
    &:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .iconfont {
      font-size: 16px;
      margin-right: 10px;
    }
    .is-active > .el-submenu__title {
      i,
      span {
        color: #409eff !important;
      }
    }
  }
}
</style>